<template>
  <view
    class="nvue-page-root"
    style="
      background-color: darkgray;
      display: flex;
      flex-flow: column;
      height: 100%;
    "
  >
    <view class="uni-common-mt" style="flex: 1; overflow-y: auto">
      <scroll-view
        :style="{
          height: scrollHeight + 'px',
          backgroundImage: 'url(' + bkimg + ')',
        }"
        show-scrollbar="false"
        scroll-y
      >
        <view
          v-show="userData.level == 0"
          class="uni-form-item uni-column"
          style="margin-top: 100px"
        >
          <text
            class="page-title"
            style="font-size: 24px; opacity: 1; background-color: #b3b1b1"
            >你是新用户，可以：</text
          >
          <!-- <uni-icons type="right" size="30"></uni-icons> -->
          <button @click="nextStep(0)">新建组织</button>
          <button @click="nextStep(5)">加入组织申请</button>
        </view>
        <view v-show="userData.level == 6" class="uni-form-item uni-column">
          <view>
            <view class="uni-page-head-bd" style="margin-top: 300rpx">
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span>请输入你的姓名</view
                >
              </view>
              <view class="uni-input-wrapper">
                <input
                  style="padding-left: 15%"
                  v-model="userData.nickName"
                  class="uni-input"
                  maxlength="10"
                  focus
                  placeholder="组织中都知道的名字"
              /></view>
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span
                  >请输入你拟加入的组织名称</view
                >
              </view>
              <view class="uni-input-wrapper">
                <input
                  style="padding-left: 15%"
                  v-model="userData.orgName"
                  class="uni-input"
                  maxlength="10"
                  focus
                  placeholder="加入的组织名称"
              /></view>
              <button @click="saveToolConfig">提交申请</button>
            </view>
          </view>
        </view>

        <view v-show="userData.level == 1" class="uni-form-item uni-column">
          <view>
            <view class="uni-page-head-bd" style="margin-top: 300rpx">
              <view
                class="page-title"
                style="font-size: 24px; opacity: 1; background-color: #b3b1b1"
              >
                工具配置步骤一</view
              >
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span>请输入你的姓名</view
                >
              </view>
              <view class="uni-input-wrapper">
                <input
                  style="padding-left: 15%"
                  v-model="userData.nickName"
                  class="uni-input"
                  maxlength="10"
                  focus
                  placeholder="组织中都知道的名字"
              /></view>
              <button @click="nextStep(1)">下一步</button>
            </view>
          </view>
        </view>
        <view v-show="userData.level == 2">
          <view class="uni-form-item uni-column">
            <view class="uni-page-head-bd" style="margin-top: 300rpx">
              <view
                class="page-title"
                style="font-size: 24px; opacity: 1; background-color: #b3b1b1"
              >
                工具配置步骤二</view
              >
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span
                  >请输入单位、团队、组织名称</view
                >
              </view>
              <view class="uni-input-wrapper">
                <input
                  style="padding-left: 15%"
                  v-model="userData.orgName"
                  maxlength="30"
                  class="uni-input"
                  focus
                  placeholder="如某某公司方便别人加入"
                />
              </view>
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span>在你的组织中本工具名称</view
                >
              </view>
              <view class="uni-input-wrapper">
                <input
                  style="padding-left: 15%"
                  v-model="userData.toolsName"
                  class="uni-input"
                  maxlength="10"
                  focus
                  placeholder="请输入名称如打赏工具、红包工具"
              /></view>
              <view class="title">
                <view class="uni-form-item__title"
                  ><span style="color: red">*</span>选择工具模式</view
                >
              </view>
              <view class="uni-input-wrapper">
                <picker
                  :value="sType"
                  @change="bindPickerChange"
                  :range="array"
                  range-key="name"
                >
                  <view class="uni-input">{{ array[sType].name }}</view>
                </picker></view
              >
              <button @click="nextStep(2)">下一步</button>
            </view>
          </view>
        </view>
        <view v-show="userData.level == 3">
          <view class="uni-form-item uni-column">
            <view
              class="uni-page-head-bd"
              style="margin-top: 300rpx; background-color: white"
            >
              <view
                class="page-title"
                style="font-size: 24px; opacity: 1; background-color: #b3b1b1"
              >
                工具配置步骤三</view
              >
              <view v-for="(item, index) in userData.class" :key="item.id">
                <view
                  style="width: 100%; border-width: 1rpx; border-style: solid"
                >
                  <view style="background-color: #beb8b8; color: black"
                    >第 {{ index + 1 }} 级
                    <text v-if="index != 0" @click="delItem(index)"
                      >删除</text
                    ></view
                  >
                  <view class="title">
                    <view class="uni-form-item__title"
                      ><span style="color: red">*</span>请输入层级名称</view
                    >
                  </view>
                  <view class="uni-input-wrapper">
                    <input
                      style="padding-left: 15%"
                      v-model="item.className"
                      class="uni-input"
                      maxlength="10"
                      placeholder="比如总经理、副总、组长..."
                  /></view>
                  <view class="title">
                    <view class="uni-form-item__title"
                      ><span style="color: red">*</span>限额金额</view
                    >
                  </view>
                  <view>
                    <slider
                      style="background-color: white; color: white"
                      @change="bindSliderChange(index, $event)"
                      :value="item.classLimit"
                      name="slider"
                      show-value
                      min="50"
                      step="50"
                      max="5000"
                    ></slider>
                  </view>
                  <view class="title">
                    <view class="uni-form-item__title"
                      ><span style="color: red">*</span>请选择层级限额周期</view
                    >
                  </view>
                  <view
                    class="uni-input-wrapper"
                    style="padding-left: 5%; width: 80%"
                  >
                    <picker
                      :value="item.classPeriod"
                      :range="array1"
                      @change="bindPickerChange1(index, $event)"
                      range-key="name"
                    >
                      <view class="uni-input">{{
                        array1[item.classPeriod].name
                      }}</view>
                    </picker></view
                  >
                </view>
                <view style="height: 50rpx"> </view>
              </view>

              <button @click="addClass()">添加</button>
              <button @click="saveToolConfig">完成</button>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { saveConfig } from "@/api/login";
import bkimg from "@/static/1111.png";
const userId = ref(0);
const level = ref(1);
const userData = ref({
  nickName: "",
  appId: "",
  paras: "",
  sign: "",
  level: 0,
  orgName: "",
  toolsName: "",
  toolMode: 1,
  userMode: 1,
  class: [
    {
      id: 0,
      className: "总经理",
      classLimit: 5000,
      classPeriod: 0,
    },
  ],
});
const array = [{ name: "勋章" }, { name: "奖状" }];
const array1 = [{ name: "年" }, { name: "月" }];
const sType = ref(0);

onLoad((option) => {
  userData.value.appId = option.appId;
  userData.value.paras = option.paras;
  userData.value.sign = option.sign;

  console.log("首页onLoad");
});
const addClass = async () => {
  userData.value.class.push({
    id: userData.value.class.length,
    className: "",
    classLimit:
      userData.value.class[userData.value.class.length - 1].classLimit,
    classPeriod: 0,
  });
};
const delItem = async (index: number) => {
  userData.value.class.splice(index, 1);
};
const nextStep = async (iStep: number) => {
  if (iStep == 0) {
    userData.value.level = 1;
    userData.value.userMode = 1;
  } else if (iStep == 5) {
    userData.value.level = 6;
    userData.value.userMode = 2;
  } else if (iStep == 1) {
    if (userData.value.nickName != "") {
      userData.value.level = 2;
    } else {
      uni.showToast({
        title: "你的姓名不能为空",
        icon: "error",
      });
    }
  } else if (iStep == 2) {
    if (userData.value.orgName == "" || userData.value.toolsName == "") {
      uni.showToast({
        title: "请输入相关信息",
        icon: "error",
      });
    } else {
      userData.value.level = 3;
    }
  }
};
const saveToolConfig = async () => {
  if (userData.value.userMode == 1) {
    let i = 0;
    for (i = 0; i < userData.value.class.length; i++) {
      if (userData.value.class[i].className == "") {
        uni.showToast({
          title: "请输入相关信息",
          icon: "error",
        });
        return;
      }
    }
  } else {
    if (userData.value.nickName == "" || userData.value.orgName == "") {
      uni.showToast({
        title: "请输入相关信息",
        icon: "error",
      });
      return;
    }
  }

  const res = await saveConfig({
    toolConfig: JSON.stringify(userData.value),
  });
  if (res.code == 0) {
    uni.setStorageSync("token", res.data.token);
    uni.setStorageSync("loginInfo", res.data);
    uni.switchTab({
      url: "/pages/index/index",
    });
  } else {
    uni.showToast({
      title: res.msg,
      icon: "error",
    });
    return;
  }
};

const bindPickerChange = async (e) => {
  sType.value = e.detail.value;
  userData.value.toolMode = sType.value;
};
const bindPickerChange1 = async (index: number, e) => {
  userData.value.class[index].classPeriod = e.detail.value;
};
const bindSliderChange = async (index: number, e) => {
  userData.value.class[index].classLimit = e.detail.value;
};

const scrollHeight = ref("800");

onReady(() => {
  //这里不要用onLoad，要不然提示错误
  uni.getSystemInfo({
    success: (res) => {
      let query = uni.createSelectorQuery().select(".nvue-page-root");
      //想要获取高度的元素名（class/id）注意：这里要写scroll-view最外层的（class/id）
      query
        .boundingClientRect((data) => {
          //可用高度减去top高度要在里面设置，放在外面app端不生效
          scrollHeight.value = `${res.windowHeight }`;
        })
        .exec();
    },
  });
});
</script>

<style lang="scss">
.center-item {
  display: flex;
  align-items: center;
  /* 设置垂直居中 */
  justify-content: center;
  /* 如果需要水平居中，也可以加上此行 */
}

.nvue-page-root {
  // background-color: #f8f8f8;
  padding-bottom: 20px;
}

.page-title {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 25rpx;
}

.page-title__wrapper {
  padding: 0px 10px;
  border-bottom-color: #d8d8d8;
  border-bottom-width: 1px;
}

.page-title__text {
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  color: #bebebe;
}

.title {
  padding: 5px;
  background-color: #ffffff;
}

.uni-form-item__title {
  font-size: 16px;
  line-height: 24px;
  color: #181817;
}

.uni-input-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  // padding: 8px 13px;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #ffffff;
}

.uni-input {
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  padding: 0px;
  flex: 1;
  color: black;
}

.uni-input-placeholder {
  color: #ded6d6;
}

.uni-icon {
  font-family: uniicons;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #999999;
}

.uni-eye-active {
  color: #007aff;
}
</style>
